<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cencat SaaS - 租户详情</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            info: '#40A9FF',
            dark: '#1D2129',
            'dark-2': '#4E5969',
            'light-1': '#F2F3F5',
            'light-2': '#E5E6EB',
            'light-3': '#C9CDD4'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 2px 14px 0 rgba(0, 0, 0, 0.06)',
            'card-hover': '0 6px 20px 0 rgba(0, 0, 0, 0.1)',
            'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
            'modal': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
          }
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-thin {
        scrollbar-width: thin;
      }
      .scrollbar-thin::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }
      .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
        border-radius: 2px;
      }
    }
  </style>
  
  <style>
    /* 全局样式 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      overflow-x: hidden;
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    
    /* 进度条动画 */
    .progress-bar {
      transition: width 1s ease-in-out;
    }
    
    /* 表格行悬停效果 */
    .table-row-hover {
      transition: background-color 0.2s ease;
    }
    
    .table-row-hover:hover {
      background-color: rgba(242, 243, 245, 0.5);
    }
    
    /* 开关按钮样式 */
    .toggle-checkbox:checked {
      right: 0;
      border-color: #165DFF;
    }
    
    .toggle-checkbox:checked + .toggle-label {
      background-color: #165DFF;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideIn {
      from { transform: translateY(10px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    .animate-fade-in {
      animation: fadeIn 0.3s ease-in-out;
    }
    
    .animate-slide-in {
      animation: slideIn 0.3s ease-out;
    }
    
    /* 标签页切换动画 */
    .tenant-tab-content {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .tenant-tab-content.hidden {
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
    }
    
    .tenant-tab-content.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
  </style>
</head>

<body class="bg-light-1 text-dark overflow-x-hidden">
  <div class="flex h-screen">
    <!-- 侧边栏导航 -->
    <aside id="sidebar" class="w-64 bg-white h-full shadow-md fixed left-0 top-0 z-30 transition-all duration-300 transform md:translate-x-0 -translate-x-full">
      <!-- 品牌标识 -->
      <div class="p-4 border-b border-light-2 flex items-center space-x-3">
        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
          <i class="fa fa-cubes text-white text-xl"></i>
        </div>
        <div>
          <h1 class="text-lg font-bold text-primary">Cencat SaaS</h1>
          <p class="text-xs text-dark-2">多租户管理平台</p>
        </div>
        <button id="close-sidebar" class="ml-auto md:hidden text-dark-2 hover:text-primary">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 租户信息 -->
      <div class="p-4 border-b border-light-2">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-light-1 rounded-full overflow-hidden">
            <img src="https://picsum.photos/id/1005/200/200" alt="当前租户Logo" class="w-full h-full object-cover">
          </div>
          <div>
            <p class="font-medium text-sm">云帆科技有限公司</p>
            <p class="text-xs text-dark-2">企业版 | ID: T2025001</p>
          </div>
        </div>
        <button id="switch-tenant-btn" class="mt-3 w-full text-xs text-primary hover:text-primary/80 flex items-center justify-center space-x-1 transition-all duration-300">
          <i class="fa fa-exchange"></i>
          <span>切换租户</span>
        </button>
      </div>
      
      <!-- 导航菜单 -->
      <nav class="p-3">
        <ul class="space-y-1">
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2">主导航</li>
          
          <li>
            <a href="dashboard.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-dashboard w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>仪表盘</span>
            </a>
          </li>
          
          <li>
            <a href="tenants.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg bg-primary/10 text-primary group transition-all duration-300">
              <i class="fa fa-building-o w-5 h-5 mr-3"></i>
              <span>租户管理</span>
            </a>
          </li>
          
          <li>
            <a href="resources.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-server w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>资源监控</span>
            </a>
          </li>
          
          <li>
            <a href="users.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-users w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>用户管理</span>
            </a>
          </li>
          
          <li>
            <a href="notifications.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-bell-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>通知中心</span>
              <span class="ml-auto bg-danger text-white text-xs px-1.5 py-0.5 rounded-full">3</span>
            </a>
          </li>
          
          <li class="mt-6 text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2">系统设置</li>
          
          <li>
            <a href="packages.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-tags w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>套餐管理</span>
            </a>
          </li>
          
          <li>
            <a href="security.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-shield w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>安全设置</span>
            </a>
          </li>
          
          <li>
            <a href="logs.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-file-text-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>操作日志</span>
            </a>
          </li>
        </ul>
      </nav>
      
      <!-- 底部 -->
      <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-light-2">
        <div class="bg-light-1 rounded-lg p-3">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs text-dark-2">存储空间</span>
            <span class="text-xs font-medium">18.5GB / 50GB</span>
          </div>
          <div class="h-1.5 bg-light-2 rounded-full overflow-hidden">
            <div class="h-full bg-primary rounded-full progress-bar" style="width: 37%"></div>
          </div>
          <button class="mt-2 w-full text-xs bg-primary/10 text-primary py-1.5 rounded hover:bg-primary/20 transition-all duration-300">
            升级存储空间
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 md:ml-64 transition-all duration-300">
      <!-- 顶部导航栏 -->
      <header class="bg-white shadow-sm sticky top-0 z-20">
        <div class="flex items-center justify-between p-4">
          <div class="flex items-center">
            <button id="toggle-sidebar" class="mr-4 text-dark-2 hover:text-primary md:hidden">
              <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="relative">
              <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-lg bg-light-1 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-primary/30">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2"></i>
            </div>
          </div>
          
          <div class="flex items-center space-x-4">
            <!-- 通知按钮 -->
            <div class="relative">
              <button id="notification-btn" class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-light-1 relative transition-all duration-300">
                <i class="fa fa-bell-o text-dark-2"></i>
                <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
              </button>
              
              <!-- 通知下拉框 -->
              <div id="notification-dropdown" class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-dropdown p-3 hidden animate-fade-in z-50">
                <div class="flex justify-between items-center mb-3">
                  <h3 class="font-medium">通知消息</h3>
                  <a href="notifications.html" class="text-xs text-primary hover:text-primary/80 transition-all duration-300">查看全部</a>
                </div>
                
                <div class="space-y-3 max-h-96 overflow-y-auto scrollbar-hide">
                  <!-- 未读通知 -->
                  <div class="p-3 bg-primary/5 rounded-lg border-l-2 border-primary cursor-pointer hover:bg-primary/10 transition-all duration-300">
                    <div class="flex justify-between">
                      <p class="text-sm font-medium">租户资源预警</p>
                      <span class="text-xs text-dark-2">10分钟前</span>
                    </div>
                    <p class="text-xs text-dark-2 mt-1">租户"云帆科技"的存储空间已使用超过80%，建议升级套餐。</p>
                  </div>
                  
                  <!-- 未读通知 -->
                  <div class="p-3 bg-primary/5 rounded-lg border-l-2 border-primary cursor-pointer hover:bg-primary/10 transition-all duration-300">
                    <div class="flex justify-between">
                      <p class="text-sm font-medium">新租户注册</p>
                      <span class="text-xs text-dark-2">1小时前</span>
                    </div>
                    <p class="text-xs text-dark-2 mt-1">租户"星辰教育"已完成注册，等待审核。</p>
                  </div>
                  
                  <!-- 已读通知 -->
                  <div class="p-3 hover:bg-light-1 rounded-lg transition-all duration-300 cursor-pointer">
                    <div class="flex justify-between">
                      <p class="text-sm font-medium">系统维护通知</p>
                      <span class="text-xs text-dark-2">昨天</span>
                    </div>
                    <p class="text-xs text-dark-2 mt-1">本周六凌晨2点至4点将进行系统维护，期间服务可能中断。</p>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 帮助按钮 -->
            <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-light-1 transition-all duration-300">
              <i class="fa fa-question text-dark-2"></i>
            </button>
            
            <!-- 用户菜单 -->
            <div class="relative">
              <button id="user-menu-btn" class="flex items-center space-x-2">
                <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-transparent hover:border-primary transition-all duration-300">
                  <img src="https://picsum.photos/id/1012/200/200" alt="管理员头像" class="w-full h-full object-cover">
                </div>
                <div class="hidden md:block text-left">
                  <p class="text-sm font-medium">张管理员</p>
                  <p class="text-xs text-dark-2">超级管理员</p>
                </div>
                <i class="fa fa-angle-down text-dark-2 hidden md:block"></i>
              </button>
              
              <!-- 用户下拉菜单 -->
              <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-dropdown p-2 hidden animate-fade-in z-50">
                <a href="profile.html" class="block px-3 py-2 text-sm hover:bg-light-1 rounded transition-all duration-300">
                  <i class="fa fa-user-o mr-2 text-dark-2"></i>个人资料
                </a>
                <a href="account-settings.html" class="block px-3 py-2 text-sm hover:bg-light-1 rounded transition-all duration-300">
                  <i class="fa fa-cog mr-2 text-dark-2"></i>账户设置
                </a>
                <div class="border-t border-light-2 my-1"></div>
                <a href="login.html" class="block px-3 py-2 text-sm text-danger hover:bg-danger/10 rounded transition-all duration-300">
                  <i class="fa fa-sign-out mr-2"></i>退出登录
                </a>
              </div>
            </div>
          </div>
        </div>
      </header>

      <!-- 页面内容 -->
      <main class="p-4 md:p-6">
        <!-- 页面标题和操作 -->
        <div class="mb-6 animate-fade-in flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <div class="flex items-center">
              <a href="tenants.html" class="mr-3 text-dark-2 hover:text-primary transition-all duration-300">
                <i class="fa fa-arrow-left"></i>
              </a>
              <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">租户详情</h2>
            </div>
            <p class="text-dark-2 mt-1">查看和管理租户的详细信息</p>
          </div>
          
          <div class="flex space-x-3">
            <button class="bg-light-1 text-dark hover:bg-light-2 text-sm px-4 py-2 rounded-lg transition-all duration-300 flex items-center">
              <i class="fa fa-history mr-2"></i>
              <span>操作记录</span>
            </button>
            
            <button id="upgrade-package-btn" class="bg-primary text-white text-sm px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-300 flex items-center">
              <i class="fa fa-refresh mr-2"></i>
              <span>升级套餐</span>
            </button>
          </div>
        </div>
        
        <!-- 租户基本信息 -->
        <div class="bg-white rounded-xl shadow-card p-5 mb-6 animate-slide-in">
          <div class="flex flex-col md:flex-row md:items-center gap-6">
            <div class="flex-shrink-0">
              <div class="w-20 h-20 rounded-xl overflow-hidden border-2 border-light-2">
                <img id="tenant-detail-logo" src="https://picsum.photos/id/1005/200/200" alt="租户Logo" class="w-full h-full object-cover">
              </div>
              <button class="mt-3 w-full text-xs text-primary hover:text-primary/80 flex items-center justify-center space-x-1 transition-all duration-300">
                <i class="fa fa-upload"></i>
                <span>更换Logo</span>
              </button>
            </div>
            
            <div class="flex-1">
              <div class="flex flex-col md:flex-row md:items-center justify-between mb-3">
                <h3 id="tenant-detail-name" class="text-xl font-bold">云帆科技有限公司</h3>
                <span id="tenant-detail-status" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-success/10 text-success mt-2 md:mt-0">
                  <span class="w-2 h-2 bg-success rounded-full mr-2"></span>正常
                </span>
              </div>
              
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <p class="text-xs text-dark-2">租户ID</p>
                  <p id="tenant-detail-id" class="text-sm font-medium">T2025001</p>
                </div>
                
                <div>
                  <p class="text-xs text-dark-2">套餐类型</p>
                  <p id="tenant-detail-package" class="text-sm font-medium">企业版</p>
                </div>
                
                <div>
                  <p class="text-xs text-dark-2">创建时间</p>
                  <p id="tenant-detail-created" class="text-sm font-medium">2025-01-15</p>
                </div>
                
                <div>
                  <p class="text-xs text-dark-2">联系人</p>
                  <p id="tenant-detail-contact" class="text-sm font-medium">王经理</p>
                </div>
                
                <div>
                  <p class="text-xs text-dark-2">联系电话</p>
                  <p id="tenant-detail-phone" class="text-sm font-medium">138****8000</p>
                </div>
                
                <div>
                  <p class="text-xs text-dark-2">电子邮箱</p>
                  <p id="tenant-detail-email" class="text-sm font-medium">contact@cloudsail.com</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 资源使用情况 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
          <div class="lg:col-span-2 bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex justify-between items-center mb-5">
              <h3 class="font-semibold">资源使用趋势</h3>
              <div class="flex space-x-2">
                <button class="text-xs px-3 py-1 bg-primary text-white rounded-full">日</button>
                <button class="text-xs px-3 py-1 bg-light-1 text-dark-2 hover:bg-light-2 rounded-full transition-all duration-300">周</button>
                <button class="text-xs px-3 py-1 bg-light-1 text-dark-2 hover:bg-light-2 rounded-full transition-all duration-300">月</button>
              </div>
            </div>
            <div class="h-80">
              <canvas id="tenantResourceChart"></canvas>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <h3 class="font-semibold mb-5">资源配额与使用</h3>
            
            <div class="space-y-6">
              <div>
                <div class="flex justify-between mb-2">
                  <p class="text-sm">存储空间</p>
                  <p class="text-sm font-medium">42.5GB / 50GB</p>
                </div>
                <div class="h-2 bg-light-2 rounded-full overflow-hidden">
                  <div class="h-full bg-warning rounded-full progress-bar" style="width: 85%"></div>
                </div>
                <p class="text-xs text-dark-2 mt-1">已使用 85% <span class="text-warning ml-1">| 即将满额</span></p>
              </div>
              
              <div>
                <div class="flex justify-between mb-2">
                  <p class="text-sm">CPU 配额</p>
                  <p class="text-sm font-medium">4.2核 / 8核</p>
                </div>
                <div class="h-2 bg-light-2 rounded-full overflow-hidden">
                  <div class="h-full bg-primary rounded-full progress-bar" style="width: 52%"></div>
                </div>
                <p class="text-xs text-dark-2 mt-1">已使用 52% <span class="text-success ml-1">| 状态良好</span></p>
              </div>
              
              <div>
                <div class="flex justify-between mb-2">
                  <p class="text-sm">内存配额</p>
                  <p class="text-sm font-medium">8.4GB / 16GB</p>
                </div>
                <div class="h-2 bg-light-2 rounded-full overflow-hidden">
                  <div class="h-full bg-primary rounded-full progress-bar" style="width: 52%"></div>
                </div>
                <p class="text-xs text-dark-2 mt-1">已使用 52% <span class="text-success ml-1">| 状态良好</span></p>
              </div>
              
              <div>
                <div class="flex justify-between mb-2">
                  <p class="text-sm">用户数量</p>
                  <p class="text-sm font-medium">28 / 50</p>
                </div>
                <div class="h-2 bg-light-2 rounded-full overflow-hidden">
                  <div class="h-full bg-success rounded-full progress-bar" style="width: 56%"></div>
                </div>
                <p class="text-xs text-dark-2 mt-1">已使用 56% <span class="text-success ml-1">| 状态良好</span></p>
              </div>
              
              <button class="w-full text-sm bg-primary/10 text-primary py-2 rounded-lg hover:bg-primary/20 transition-all duration-300 mt-2">
                升级资源配额
              </button>
            </div>
          </div>
        </div>
        
        <!-- 标签页内容 -->
        <div class="bg-white rounded-xl shadow-card overflow-hidden animate-slide-in">
          <!-- 标签页导航 -->
          <div class="border-b border-light-2 flex flex-wrap">
            <button class="tenant-tab-btn active py-4 px-6 text-primary border-b-2 border-primary font-medium text-sm" data-tab="users">
              用户管理
            </button>
            <button class="tenant-tab-btn py-4 px-6 text-dark-2 hover:text-dark font-medium text-sm" data-tab="billing">
              账单记录
            </button>
            <button class="tenant-tab-btn py-4 px-6 text-dark-2 hover:text-dark font-medium text-sm" data-tab="settings">
              租户设置
            </button>
            <button class="tenant-tab-btn py-4 px-6 text-dark-2 hover:text-dark font-medium text-sm" data-tab="logs">
              操作日志
            </button>
          </div>
          
          <!-- 标签页内容 -->
          <div class="p-5">
            <!-- 用户管理标签页 -->
            <div class="tenant-tab-content active" id="tab-users">
              <div class="flex justify-between items-center mb-5">
                <h4 class="font-medium">租户用户列表</h4>
                <button id="add-user-btn" class="bg-primary text-white text-sm px-4 py-1.5 rounded-lg hover:bg-primary/90 transition-all duration-300 flex items-center">
                  <i class="fa fa-plus mr-2"></i>
                  <span>添加用户</span>
                </button>
              </div>
              
              <div class="overflow-x-auto">
                <table class="w-full">
                  <thead>
                    <tr class="border-b border-light-2">
                      <th class="text-left py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">用户信息</th>
                      <th class="text-left py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">角色</th>
                      <th class="text-left py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">状态</th>
                      <th class="text-left py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">最后登录</th>
                      <th class="text-right py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="border-b border-light-2 table-row-hover">
                      <td class="py-3 px-2">
                        <div class="flex items-center">
                          <div class="w-8 h-8 rounded-full overflow-hidden mr-3">
                            <img src="https://picsum.photos/id/1012/200/200" alt="王经理" class="w-full h-full object-cover">
                          </div>
                          <div>
                            <p class="text-sm font-medium">王经理</p>
                            <p class="text-xs text-dark-2">wang@cloudsail.com</p>
                          </div>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">管理员</span>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-success/10 text-success px-2 py-0.5 rounded-full">活跃</span>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">今天 09:45</p>
                      </td>
                      <td class="py-3 px-2 text-right">
                        <div class="flex justify-end space-x-2">
                          <button class="text-primary hover:text-primary/80 transition-all duration-300">
                            <i class="fa fa-edit"></i>
                          </button>
                          <button class="text-dark-2 hover:text-dark transition-all duration-300">
                            <i class="fa fa-ellipsis-v"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <tr class="border-b border-light-2 table-row-hover">
                      <td class="py-3 px-2">
                        <div class="flex items-center">
                          <div class="w-8 h-8 rounded-full overflow-hidden mr-3">
                            <img src="https://picsum.photos/id/1027/200/200" alt="李工" class="w-full h-full object-cover">
                          </div>
                          <div>
                            <p class="text-sm font-medium">李工</p>
                            <p class="text-xs text-dark-2">li@cloudsail.com</p>
                          </div>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-secondary/10 text-secondary px-2 py-0.5 rounded-full">操作员</span>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-success/10 text-success px-2 py-0.5 rounded-full">活跃</span>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">昨天 15:30</p>
                      </td>
                      <td class="py-3 px-2 text-right">
                        <div class="flex justify-end space-x-2">
                          <button class="text-primary hover:text-primary/80 transition-all duration-300">
                            <i class="fa fa-edit"></i>
                          </button>
                          <button class="text-dark-2 hover:text-dark transition-all duration-300">
                            <i class="fa fa-ellipsis-v"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                    
                    <tr class="border-b border-light-2 table-row-hover">
                      <td class="py-3 px-2">
                        <div class="flex items-center">
                          <div class="w-8 h-8 rounded-full overflow-hidden mr-3">
                            <img src="https://picsum.photos/id/1062/200/200" alt="张会计" class="w-full h-full object-cover">
                          </div>
                          <div>
                            <p class="text-sm font-medium">张会计</p>
                            <p class="text-xs text-dark-2">zhang@cloudsail.com</p>
                          </div>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-info/10 text-info px-2 py-0.5 rounded-full">查看者</span>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-warning/10 text-warning px-2 py-0.5 rounded-full">未活跃</span>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">2025-09-01 10:20</p>
                      </td>
                      <td class="py-3 px-2 text-right">
                        <div class="flex justify-end space-x-2">
                          <button class="text-primary hover:text-primary/80 transition-all duration-300">
                            <i class="fa fa-edit"></i>
                          </button>
                          <button class="text-dark-2 hover:text-dark transition-all duration-300">
                            <i class="fa fa-ellipsis-v"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            
            <!-- 账单记录标签页 -->
            <div class="tenant-tab-content hidden" id="tab-billing">
              <div class="flex justify-between items-center mb-5">
                <h4 class="font-medium">账单与支付记录</h4>
                <div class="relative">
                  <select class="pl-3 pr-8 py-1.5 rounded-lg bg-light-1 text-sm w-40 focus:outline-none focus:ring-2 focus:ring-primary/30 appearance-none">
                    <option value="all">所有记录</option>
                    <option value="paid">已支付</option>
                    <option value="pending">待支付</option>
                    <option value="refunded">已退款</option>
                  </select>
                  <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-2 text-xs"></i>
                </div>
              </div>
              
              <div class="space-y-4">
                <div class="border border-light-2 rounded-lg p-4 hover:border-primary/30 transition-all duration-300">
                  <div class="flex flex-col md:flex-row md:items-center justify-between mb-3">
                    <div>
                      <h5 class="font-medium">2025年第三季度服务费</h5>
                      <p class="text-xs text-dark-2 mt-0.5">订单号: INV202509001</p>
                    </div>
                    <div class="mt-2 md:mt-0">
                      <p class="text-lg font-bold text-primary">¥3,600.00</p>
                      <p class="text-xs text-success mt-0.5">已支付 · 2025-09-01</p>
                    </div>
                  </div>
                  
                  <div class="flex flex-wrap gap-4 text-sm">
                    <div>
                      <p class="text-xs text-dark-2">套餐</p>
                      <p>企业版 (季度)</p>
                    </div>
                    <div>
                      <p class="text-xs text-dark-2">支付方式</p>
                      <p>银行转账</p>
                    </div>
                    <div>
                      <p class="text-xs text-dark-2">服务周期</p>
                      <p>2025-07-01 至 2025-09-30</p>
                    </div>
                  </div>
                  
                  <div class="mt-4 flex justify-end">
                    <button class="text-primary hover:text-primary/80 text-sm transition-all duration-300">
                      <i class="fa fa-download mr-1"></i> 下载发票
                    </button>
                  </div>
                </div>
                
                <div class="border border-light-2 rounded-lg p-4 hover:border-primary/30 transition-all duration-300">
                  <div class="flex flex-col md:flex-row md:items-center justify-between mb-3">
                    <div>
                      <h5 class="font-medium">2025年第二季度服务费</h5>
                      <p class="text-xs text-dark-2 mt-0.5">订单号: INV202506001</p>
                    </div>
                    <div class="mt-2 md:mt-0">
                      <p class="text-lg font-bold text-primary">¥3,600.00</p>
                      <p class="text-xs text-success mt-0.5">已支付 · 2025-06-05</p>
                    </div>
                  </div>
                  
                  <div class="flex flex-wrap gap-4 text-sm">
                    <div>
                      <p class="text-xs text-dark-2">套餐</p>
                      <p>企业版 (季度)</p>
                    </div>
                    <div>
                      <p class="text-xs text-dark-2">支付方式</p>
                      <p>银行转账</p>
                    </div>
                    <div>
                      <p class="text-xs text-dark-2">服务周期</p>
                      <p>2025-04-01 至 2025-06-30</p>
                    </div>
                  </div>
                  
                  <div class="mt-4 flex justify-end">
                    <button class="text-primary hover:text-primary/80 text-sm transition-all duration-300">
                      <i class="fa fa-download mr-1"></i> 下载发票
                    </button>
                  </div>
                </div>
                
                <div class="border border-light-2 rounded-lg p-4 hover:border-primary/30 transition-all duration-300">
                  <div class="flex flex-col md:flex-row md:items-center justify-between mb-3">
                    <div>
                      <h5 class="font-medium">2025年第一季度服务费</h5>
                      <p class="text-xs text-dark-2 mt-0.5">订单号: INV202503001</p>
                    </div>
                    <div class="mt-2 md:mt-0">
                      <p class="text-lg font-bold text-primary">¥3,600.00</p>
                      <p class="text-xs text-success mt-0.5">已支付 · 2025-03-02</p>
                    </div>
                  </div>
                  
                  <div class="flex flex-wrap gap-4 text-sm">
                    <div>
                      <p class="text-xs text-dark-2">套餐</p>
                      <p>企业版 (季度)</p>
                    </div>
                    <div>
                      <p class="text-xs text-dark-2">支付方式</p>
                      <p>银行转账</p>
                    </div>
                    <div>
                      <p class="text-xs text-dark-2">服务周期</p>
                      <p>2025-01-01 至 2025-03-31</p>
                    </div>
                  </div>
                  
                  <div class="mt-4 flex justify-end">
                    <button class="text-primary hover:text-primary/80 text-sm transition-all duration-300">
                      <i class="fa fa-download mr-1"></i> 下载发票
                    </button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 租户设置标签页 -->
            <div class="tenant-tab-content hidden" id="tab-settings">
              <form id="tenant-settings-form">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                  <div>
                    <label class="block text-sm font-medium text-dark mb-1.5">租户名称</label>
                    <input type="text" value="云帆科技有限公司" class="w-full px-3 py-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-dark mb-1.5">租户ID</label>
                    <input type="text" value="T2025001" class="w-full px-3 py-2 border border-light-2 rounded-lg bg-light-1 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" disabled>
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-dark mb-1.5">联系人</label>
                    <input type="text" value="王经理" class="w-full px-3 py-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-dark mb-1.5">联系电话</label>
                    <input type="tel" value="13800138000" class="w-full px-3 py-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                  </div>
                  
                  <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-dark mb-1.5">电子邮箱</label>
                    <input type="email" value="contact@cloudsail.com" class="w-full px-3 py-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                  </div>
                  
                  <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-dark mb-1.5">企业地址</label>
                    <textarea rows="3" class="w-full px-3 py-2 border border-light-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">北京市海淀区科技园区88号云帆大厦15层</textarea>
                  </div>
                  
                  <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-dark mb-1.5">租户状态</label>
                    <div class="flex items-center">
                      <label class="inline-flex items-center cursor-pointer">
                        <input type="checkbox" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-200 ease-in focus:outline-none"/>
                        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-light-2 cursor-pointer transition-all duration-200 ease-in w-11"></label>
                      </label>
                      <span class="ml-3 text-sm">启用租户账户</span>
                    </div>
                  </div>
                  
                  <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-dark mb-1.5">通知设置</label>
                    <div class="space-y-3">
                      <div class="flex items-center justify-between">
                        <span class="text-sm">资源预警通知</span>
                        <label class="inline-flex items-center cursor-pointer">
                          <input type="checkbox" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-200 ease-in focus:outline-none"/>
                          <label for="toggle1" class="toggle-label block overflow-hidden h-6 rounded-full bg-light-2 cursor-pointer transition-all duration-200 ease-in w-11"></label>
                        </label>
                      </div>
                      <div class="flex items-center justify-between">
                        <span class="text-sm">账单到期通知</span>
                        <label class="inline-flex items-center cursor-pointer">
                          <input type="checkbox" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-200 ease-in focus:outline-none"/>
                          <label for="toggle2" class="toggle-label block overflow-hidden h-6 rounded-full bg-light-2 cursor-pointer transition-all duration-200 ease-in w-11"></label>
                        </label>
                      </div>
                      <div class="flex items-center justify-between">
                        <span class="text-sm">系统维护通知</span>
                        <label class="inline-flex items-center cursor-pointer">
                          <input type="checkbox" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-200 ease-in focus:outline-none"/>
                          <label for="toggle3" class="toggle-label block overflow-hidden h-6 rounded-full bg-light-2 cursor-pointer transition-all duration-200 ease-in w-11"></label>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="flex justify-end space-x-3">
                  <button type="button" class="px-5 py-2 border border-light-2 rounded-lg text-dark hover:bg-light-1 transition-all duration-300">
                    取消
                  </button>
                  <button type="submit" class="px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all duration-300">
                    保存设置
                  </button>
                </div>
              </form>
            </div>
            
            <!-- 操作日志标签页 -->
            <div class="tenant-tab-content hidden" id="tab-logs">
              <div class="flex justify-between items-center mb-5">
                <h4 class="font-medium">租户操作日志</h4>
                <div class="relative">
                  <input type="text" placeholder="搜索操作..." class="pl-8 pr-3 py-1.5 rounded-lg bg-light-1 text-sm w-48 focus:outline-none focus:ring-2 focus:ring-primary/30">
                  <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2 text-sm"></i>
                </div>
              </div>
              
              <div class="overflow-x-auto">
                <table class="w-full">
                  <thead>
                    <tr class="border-b border-light-2">
                      <th class="text-left py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">操作内容</th>
                      <th class="text-left py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">操作人</th>
                      <th class="text-left py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">IP地址</th>
                      <th class="text-left py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">操作时间</th>
                      <th class="text-left py-3 px-2 text-xs font-semibold text-dark-2 uppercase tracking-wider">状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr class="border-b border-light-2 table-row-hover">
                      <td class="py-3 px-2">
                        <p class="text-sm">上传了新的项目文档</p>
                        <p class="text-xs text-dark-2 mt-0.5">文件名称: 2025年Q3规划.pdf</p>
                      </td>
                      <td class="py-3 px-2">
                        <div class="flex items-center">
                          <div class="w-6 h-6 rounded-full overflow-hidden mr-2">
                            <img src="https://picsum.photos/id/1012/200/200" alt="王经理" class="w-full h-full object-cover">
                          </div>
                          <span class="text-sm">王经理</span>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">123.123.123.123</p>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">2025-09-24 09:45:32</p>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-success/10 text-success px-2 py-0.5 rounded-full">成功</span>
                      </td>
                    </tr>
                    
                    <tr class="border-b border-light-2 table-row-hover">
                      <td class="py-3 px-2">
                        <p class="text-sm">添加了新用户</p>
                        <p class="text-xs text-dark-2 mt-0.5">用户名: 张会计</p>
                      </td>
                      <td class="py-3 px-2">
                        <div class="flex items-center">
                          <div class="w-6 h-6 rounded-full overflow-hidden mr-2">
                            <img src="https://picsum.photos/id/1012/200/200" alt="王经理" class="w-full h-full object-cover">
                          </div>
                          <span class="text-sm">王经理</span>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">123.123.123.123</p>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">2025-09-23 16:20:15</p>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-success/10 text-success px-2 py-0.5 rounded-full">成功</span>
                      </td>
                    </tr>
                    
                    <tr class="border-b border-light-2 table-row-hover">
                      <td class="py-3 px-2">
                        <p class="text-sm">修改了租户基本信息</p>
                        <p class="text-xs text-dark-2 mt-0.5">更新了联系电话</p>
                      </td>
                      <td class="py-3 px-2">
                        <div class="flex items-center">
                          <div class="w-6 h-6 rounded-full overflow-hidden mr-2">
                            <img src="https://picsum.photos/id/1005/200/200" alt="系统管理员" class="w-full h-full object-cover">
                          </div>
                          <span class="text-sm">系统管理员</span>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">192.168.1.100</p>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">2025-09-22 10:15:47</p>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-success/10 text-success px-2 py-0.5 rounded-full">成功</span>
                      </td>
                    </tr>
                    
                    <tr class="border-b border-light-2 table-row-hover">
                      <td class="py-3 px-2">
                        <p class="text-sm">尝试登录系统</p>
                        <p class="text-xs text-dark-2 mt-0.5">登录页面</p>
                      </td>
                      <td class="py-3 px-2">
                        <div class="flex items-center">
                          <div class="w-6 h-6 rounded-full overflow-hidden mr-2">
                            <img src="https://picsum.photos/id/1062/200/200" alt="张会计" class="w-full h-full object-cover">
                          </div>
                          <span class="text-sm">张会计</span>
                        </div>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">210.210.210.210</p>
                      </td>
                      <td class="py-3 px-2">
                        <p class="text-sm">2025-09-22 08:50:22</p>
                      </td>
                      <td class="py-3 px-2">
                        <span class="text-xs bg-danger/10 text-danger px-2 py-0.5 rounded-full">失败</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              
              <!-- 分页 -->
              <div class="flex justify-between items-center mt-5">
                <p class="text-sm text-dark-2">显示 1 至 4 条，共 32 条</p>
                <div class="flex space-x-1">
                  <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 text-dark-2 hover:border-primary hover:text-primary transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fa fa-angle-left"></i>
                  </button>
                  <button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-white">1</button>
                  <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary transition-all duration-300">2</button>
                  <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary transition-all duration-300">3</button>
                  <button class="w-8 h-8 flex items-center justify-center rounded border border-light-2 text-dark-2 hover:border-primary hover:text-primary transition-all duration-300">
                    <i class="fa fa-angle-right"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      
      <!-- 页脚 -->
      <footer class="bg-white border-t border-light-2 py-4 px-6 mt-6">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <p class="text-sm text-dark-2">© 2025 Cencat SaaS 多租户管理平台. 保留所有权利.</p>
          <div class="flex space-x-4 mt-3 md:mt-0">
            <a href="help.html" class="text-sm text-dark-2 hover:text-primary transition-all duration-300">帮助中心</a>
            <a href="terms.html" class="text-sm text-dark-2 hover:text-primary transition-all duration-300">服务条款</a>
            <a href="privacy.html" class="text-sm text-dark-2 hover:text-primary transition-all duration-300">隐私政策</a>
          </div>
        </div>
      </footer>
    </div>
  </div>
  
  <!-- 升级套餐模态框（初始隐藏） -->
  <div id="upgrade-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden animate-fade-in">
    <div class="bg-white rounded-xl shadow-modal w-full max-w-lg mx-4">
      <div class="p-5 border-b border-light-2 flex justify-between items-center">
        <h3 class="font-bold text-lg">升级租户套餐</h3>
        <button id="close-modal" class="text-dark-2 hover:text-dark transition-all duration-300">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-5">
        <div class="space-y-4 mb-6">
          <div class="border border-light-2 rounded-lg p-4 hover:border-primary/30 transition-all duration-300 cursor-pointer">
            <div class="flex justify-between items-center">
              <div>
                <h4 class="font-medium">企业版</h4>
                <p class="text-sm text-dark-2 mt-1">当前使用套餐</p>
              </div>
              <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-primary/10 text-primary">
                当前
              </span>
            </div>
            <div class="mt-3 grid grid-cols-2 gap-2 text-sm">
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>50用户</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>50GB存储</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>8核CPU</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>16GB内存</span>
              </div>
            </div>
            <p class="mt-3 text-lg font-bold text-primary">¥3,600/季度</p>
          </div>
          
          <div class="border-2 border-primary rounded-lg p-4 hover:border-primary/80 transition-all duration-300 cursor-pointer bg-primary/5">
            <div class="flex justify-between items-center">
              <div>
                <h4 class="font-medium">旗舰版</h4>
                <p class="text-sm text-dark-2 mt-1">推荐升级</p>
              </div>
              <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-primary text-white">
                推荐
              </span>
            </div>
            <div class="mt-3 grid grid-cols-2 gap-2 text-sm">
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>无限用户</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>200GB存储</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>16核CPU</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>32GB内存</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>专属客服</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-check text-success mr-2"></i>
                <span>优先技术支持</span>
              </div>
            </div>
            <p class="mt-3 text-lg font-bold text-primary">¥8,800/季度</p>
          </div>
        </div>
        
        <div class="space-y-3">
          <label class="block text-sm font-medium text-dark">支付周期</label>
          <div class="flex space-x-2">
            <button class="flex-1 py-2 border border-primary bg-primary text-white rounded-lg transition-all duration-300">
              按季度
            </button>
            <button class="flex-1 py-2 border border-light-2 hover:border-primary/30 rounded-lg transition-all duration-300">
              按年度 <span class="text-xs text-success ml-1">省15%</span>
            </button>
          </div>
          
          <label class="block text-sm font-medium text-dark mt-4">支付方式</label>
          <div class="grid grid-cols-3 gap-2">
            <button class="py-2 border border-light-2 hover:border-primary/30 rounded-lg transition-all duration-300 flex items-center justify-center">
              <i class="fa fa-credit-card text-primary mr-1"></i>
              <span class="text-sm">银行卡</span>
            </button>
            <button class="py-2 border border-light-2 hover:border-primary/30 rounded-lg transition-all duration-300 flex items-center justify-center">
              <i class="fa fa-alipay text-blue-500 mr-1"></i>
              <span class="text-sm">支付宝</span>
            </button>
            <button class="py-2 border border-light-2 hover:border-primary/30 rounded-lg transition-all duration-300 flex items-center justify-center">
              <i class="fa fa-weixin text-green-500 mr-1"></i>
              <span class="text-sm">微信</span>
            </button>
          </div>
        </div>
      </div>
      
      <div class="p-5 border-t border-light-2 flex justify-end">
        <button id="confirm-upgrade" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all duration-300">
          确认升级
        </button>
      </div>
    </div>
  </div>
  
  <!-- JavaScript -->
  <script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化资源趋势图表
      initResourceChart();
      
      // 侧边栏切换
      const sidebar = document.getElementById('sidebar');
      const toggleSidebar = document.getElementById('toggle-sidebar');
      const closeSidebar = document.getElementById('close-sidebar');
      
      toggleSidebar.addEventListener('click', function() {
        sidebar.classList.toggle('-translate-x-full');
      });
      
      closeSidebar.addEventListener('click', function() {
        sidebar.classList.add('-translate-x-full');
      });
      
      // 通知下拉框
      const notificationBtn = document.getElementById('notification-btn');
      const notificationDropdown = document.getElementById('notification-dropdown');
      
      notificationBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        notificationDropdown.classList.toggle('hidden');
        userDropdown.classList.add('hidden');
      });
      
      // 用户下拉框
      const userMenuBtn = document.getElementById('user-menu-btn');
      const userDropdown = document.getElementById('user-dropdown');
      
      userMenuBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        userDropdown.classList.toggle('hidden');
        notificationDropdown.classList.add('hidden');
      });
      
      // 点击其他区域关闭下拉框
      document.addEventListener('click', function() {
        notificationDropdown.classList.add('hidden');
        userDropdown.classList.add('hidden');
      });
      
      // 标签页切换
      const tabBtns = document.querySelectorAll('.tenant-tab-btn');
      const tabContents = document.querySelectorAll('.tenant-tab-content');
      
      tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          // 移除所有激活状态
          tabBtns.forEach(b => {
            b.classList.remove('active', 'text-primary', 'border-primary');
            b.classList.add('text-dark-2');
          });
          
          tabContents.forEach(content => {
            content.classList.add('hidden');
            content.classList.remove('active');
          });
          
          // 添加当前激活状态
          this.classList.add('active', 'text-primary', 'border-primary');
          this.classList.remove('text-dark-2');
          
          const tabId = this.getAttribute('data-tab');
          const activeContent = document.getElementById(`tab-${tabId}`);
          activeContent.classList.remove('hidden');
          activeContent.classList.add('active');
        });
      });
      
      // 升级套餐模态框
      const upgradeBtn = document.getElementById('upgrade-package-btn');
      const upgradeModal = document.getElementById('upgrade-modal');
      const closeModal = document.getElementById('close-modal');
      const confirmUpgrade = document.getElementById('confirm-upgrade');
      
      upgradeBtn.addEventListener('click', function() {
        upgradeModal.classList.remove('hidden');
      });
      
      closeModal.addEventListener('click', function() {
        upgradeModal.classList.add('hidden');
      });
      
      confirmUpgrade.addEventListener('click', function() {
        // 模拟升级操作
        alert('套餐升级请求已提交，系统将在后台处理！');
        upgradeModal.classList.add('hidden');
      });
      
      // 点击模态框外部关闭
      upgradeModal.addEventListener('click', function(e) {
        if (e.target === upgradeModal) {
          upgradeModal.classList.add('hidden');
        }
      });
      
      // 添加用户按钮
      const addUserBtn = document.getElementById('add-user-btn');
      addUserBtn.addEventListener('click', function() {
        alert('添加用户功能开发中...');
      });
      
      // 切换租户按钮
      const switchTenantBtn = document.getElementById('switch-tenant-btn');
      switchTenantBtn.addEventListener('click', function() {
        alert('租户切换功能开发中...');
      });
      
      // 表单提交
      const tenantSettingsForm = document.getElementById('tenant-settings-form');
      tenantSettingsForm.addEventListener('submit', function(e) {
        e.preventDefault();
        alert('租户设置已保存！');
      });
    });
    
    // 初始化资源趋势图表
    function initResourceChart() {
      const ctx = document.getElementById('tenantResourceChart').getContext('2d');
      const chart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [
            {
              label: 'CPU使用率(%)',
              data: [45, 52, 48, 55, 60, 50, 48],
              borderColor: '#165DFF',
              backgroundColor: 'rgba(22, 93, 255, 0.1)',
              tension: 0.4,
              fill: true
            },
            {
              label: '内存使用率(%)',
              data: [38, 42, 45, 50, 52, 48, 46],
              borderColor: '#36CFC9',
              backgroundColor: 'rgba(54, 207, 201, 0.1)',
              tension: 0.4,
              fill: true
            },
            {
              label: '存储使用率(%)',
              data: [65, 70, 75, 80, 82, 85, 83],
              borderColor: '#FAAD14',
              backgroundColor: 'rgba(250, 173, 20, 0.1)',
              tension: 0.4,
              fill: true
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'top',
            },
            tooltip: {
              mode: 'index',
              intersect: false
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              max: 100,
              ticks: {
                callback: function(value) {
                  return value + '%';
                }
              }
            }
          }
        }
      });
    }
  </script>
